<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type='text/javascript' src="jquery1.4.2.js">
        </script>
        <script type="text/javascript" src="BTO.js">
        </script>
        <script type="text/javascript">
            var $j = jQuery.noConflict();
        </script>
        <link type='text/css' rel='stylesheet' href='SysCss.css' media='screen' />
        <title>无标题文档</title>
    </head>
    <body style="text-align:center">
        <div id='offset' style='width:400px;height:600px;border:1px solid #ef0;margin:20px auto;'>
            <button onclick="_show()">
                show
            </button>
        </div>
    </body>
</html>
<script type="text/javascript" src="public_Tpl.js"></script>
<script type="text/javascript">
    function _show(){
        _html = "<h2>内部的内容</h2>";
        BTO.UI.box.show({
            w: '300',
            h: '360',
            posObjectId: 'offset',
            html: _html
        });
    }
    
    BTO.UI = {
        box: (function(){
            //弹出窗
            (function(){
                //init
				var html = "<";
                $j('body').append("<div id='bto_ui_box' style='border:1px solid #f60;background:url(http://www.143.com/images/elem/boxBg.jpg) 50% 50% no-repeat;width:0;height:0;display:none;position:absolute;z-index:999;top:0;left:0;'><div style='background:#ef0;float:right;width:15px;line-height:15px;height:15px;cursor:pointer;' onclick='BTO.UI.box.hide()'>X</div><div class='inner'></div></div>");
            })();
            return {
                show: function(){
                    /*	arguments[0]={
                     * 		w : width,
                     * 		h : height,
                     * 		posObjectId : posObject,		//相对某元素定位（水平、垂直居中）
                     * 		innerHTML: ' html'
                     * 	}
                     */
                    //父对像位置信息
                    if (arguments[0].posObjectId) {
                        var _posObj = $j('#' + arguments[0].posObjectId);
                    } else {
                        var _posObj = $j('body');
                    }
                    
                    var _posObjOffset = {
                        width: _posObj[0].offsetWidth,
                        height: _posObj[0].offsetHeight,
                        left: _posObj.offset().left,
                        top: _posObj.offset().top
                    }
                    
                    //bto_ui_box位置信息
                    var _innerHTML = arguments[0].html;
                    var _width = arguments[0].w;
                    var _height = arguments[0].h;
                    var _top = _posObjOffset.top + _posObjOffset.height / 2 - _height / 2;
                    var _left = _posObjOffset.left + _posObjOffset.width / 2 - _width / 2;
                    
                    /* 1. 先定位到父对像最中间
                     * 2. 动画弹出
                     */
					$j('#bto_ui_box').find('.inner').html(_innerHTML);
                    $j('#bto_ui_box').css({
                        width: '1px',
                        height: '1px',
                        left: _posObjOffset.left + _posObjOffset.width / 2 + 'px',
                        top: _posObjOffset.top + _posObjOffset.height / 2 + 'px',
                        display: 'block',
                        opacity: .1
                    }).animate({
                        width: _width * 1 + 20 + 'px',
                        height: _height * 1 + 20 + 'px',
                        left: _left - 10 + 'px',
                        top: _top - 10 + 'px',
                        opacity: 1
                    }, 300).animate({
                        width: _width + 'px',
                        height: _height + 'px',
                        left: _left + 'px',
                        top: _top + 'px'
                    }, 50);
                },
                hide: function(){
                    var oObj = $j('#bto_ui_box');
                    var _oObjPos = {
                        width: oObj.width(),
                        height: oObj.height(),
                        top: oObj.offset().top,
                        left: oObj.offset().left
                    };
                    
                    var _left = _oObjPos.left + _oObjPos.width / 2;
                    var _top = _oObjPos.top + _oObjPos.height / 2;
                    
                    oObj.animate({
                        left: _oObjPos.left - 5 + 'px',
                        top: _oObjPos.top - 5 + 'px',
                        width: _oObjPos.width + 10 + 'px',
                        height: _oObjPos.height + 10 + 'px'
                    }, 50).animate({
                        left: _left + 'px',
                        top: _top + 'px',
                        width: '0px',
                        height: '0px',
                        opacity: 0
                    }, 300).hide();
                }
            }
        })()
    };
    
    
    BTO.UI.Dailog = function(){
        /* arguments[0]={
         * 		winType:'alert||confirm||tips',
         * 		innerHTML:	'html...',
         * 		btn:{
         * 			'OK': 'url',				//必需，不可少	(随功能的不同，可能为关闭，确定按纽)
         * 			'Cancel': 'url',			//url可为空		(只是关闭窗口)
         * 			'OtherBtn' : 'otherURL'		//其它按纽		()
         * 		}
         * }
         */
    }
</script>
